<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn v-bind:cmovies="movies" ></cpn>
</div>

<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <p>{{cmessage}}</p>
  </div>
</template>

<!--
  父子组件的通信：
       - 子组件不能引用父组件或vue实例的数据的
       - 比如一个页面从服务器请求到很多数据，其中一部分数据并非是我们整个页面的大组件来展示的，
          而是需要下面的子组件进行展示
       - 这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）
  父子组件通信的方法：
       1.通过props（属性）向子组件传递数据 --父传子
       2.通过事件向父组件发送消息--子传父
-->
<script src="../js/vue.js"></script>
<script>
  const cpn={
    template:'#cpn',
    // props:['cmovies','cmessage']  方法一：传一个数组,很少用
    props:{  // 方法二：传入一个对象，还可以指定数据类型
      // 1.类型限制
      // cmovies:Array,
      // cmessage:String
      
      // 2.多个可能的类型
      // cmessage:[String,Number]
      
      // 3.带默认值的类型
      cmessage:{
        type:String,
        default:'aaa',   // default是如果没有值传入，默认显示aaa
      //  required:true  // required:true，那么如果在vue实例里面必须传入cmessage的值,否则会报错
      },
      //4.类型是对象或数组时，默认值必须是一个函数
      cmovies:{
        type:Array,
        default(){
          return []
        },
        //5.自定义函数
        
      }
      
    }
  }
  
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好',
      movies:['山河令','火影忍者','死亡笔记']
    },
    components:{
      cpn
    }
  })

</script>
</body>
</html>